<template>
<!--  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>-->
<!--  <div class="div1">dvi1</div>
  <div class="div2">dvi2</div>
  <div class="div3">dvi3</div>
  <div class="div4">dvi4</div>
  <div class="div5">dvi5
  <div class="div5-1">div5-1</div>
  </div>-->
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
body,html,#app{
  width: 100%;
  height: 100%;
  //background-color: #42b983;
  justify-content: center;
  align-items: center;
  display: block;//flex浮动布局就可以并列上去
}
/*.div1{
  width: 350px;
  height: 700px;
  background-color: aliceblue;
  display: inline-block;
}
.div2{
  width: 350px;
  height: 700px;
  background-color: azure;
  display: inline-block;
}
.div3{
  width: 350px;
  height: 700px;
  background-color: beige;
  display: inline-block;
}
.div4{
  width: 350px;
  height: 700px;
  background-color: blanchedalmond;
  display: inline-block;
}
.div5{
  width: 350px;
  height: 700px;
  background-color: blueviolet;
  display: flex;

}
.div5-1{
  width: 200px;
  height: 100px;
  background-color: aliceblue;
  justify-content: space-around;
  justify-self: center;
  align-self: center;
}*/
</style>
